<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="returnInformation-home">
        <div class="returnInformation-topbox">
            <div>我的收益</div>
            <div style="margin-top: 13px;">
                <div class="returnInformation-boxtitle">
                    <div>周期</div>
                    <div>日产出</div>
                    <div>累计产出</div>
                </div>
                <div v-for="val in arr1" class="returnInformation-boxline">
                    <div>
                        <div>{{val.name}}</div>
                        <div>{{val.date}}</div>
                    </div>
                    <div>{{val.num1}}</div>
                    <div>{{val.num2}}</div>
                </div>
            </div>
        </div>
        <div class="returnInformation-topbox" style="height: 278px;background-color: #27282E;margin-top: 10px;">
            <div>全网总收益</div>
            <div style="margin-top: 13px;">
                <div class="returnInformation-boxtitle">
                    <div>周期</div>
                    <div>日产出</div>
                    <div>累计产出</div>
                </div>
                <div v-for="val in arr2" class="returnInformation-boxline">
                    <div>
                        <div>{{val.name}}</div>
                        <div>{{val.date}}</div>
                    </div>
                    <div style="font-size: 12px;color: rgba(255, 255, 255, .8);font-family: '黑体',Arial, Helvetica, sans-serif;">{{val.num1}}</div>
                    <div style="font-size: 12px;color: rgba(255, 255, 255, .8);font-family: '黑体',Arial, Helvetica, sans-serif;">{{val.num2}}</div>
                </div>
            </div>
        </div>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  export default {
    name: 'returnInformation',
    data () {
      return {
        title:'收益信息',
        arr1:[
            {name:'启动',date:'2020.09.01-2021.06.20',num1:'0.1 USDT',num2:'40 USDT'}
        ],
        arr2:[
            {name:'启动',date:'2020.09.01-2021.06.20',num1:'28800 GTZ',num2:'840 GTZ'},
            {name:'第一次减半',date:'2021.06.20-2023.01.25',num1:'14400 GTZ',num2:'1050 GTZ'},
            {name:'第二次减半',date:'2023.01.25-2024.08.21',num1:'7200 GTZ',num2:'210 GTZ'},
        ]
      }
    },  
    components:{
      native
    },
    computed: {
      
    },
    mounted() {
    },
    methods: {
      
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .returnInformation-home{
      padding: 0px 15px;
    }
    .returnInformation-topbox{
        width: 100%;
        height: 162px;
        padding: 15px 12px 12px 12px;
        background-color: #6E59FF;
        border-radius: 8px;
        font-size: 16px;
    }
    .returnInformation-boxtitle{
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        >div{
            padding: 12px 0px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }
        >div:nth-child(1){
            width: 140px;
        }
        >div:nth-child(2){
            width: 30%;
            padding-left: 16px;
        }
        >div:nth-child(3){
            width: 30%;
            padding-left: 16px;
            border-right: none;
        }
    }
    .returnInformation-boxline{
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        >div{
            padding: 12px 0px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }
        >div:nth-child(1){
            width: 140px;
            >div:nth-child(1){
                font-weight: 500;
            }
            >div:nth-child(2){
                font-size: 10px;
                color: rgba(255, 255, 255, .5);
            }
        }
        >div:nth-child(2){
            width: 30%;
            padding-left: 16px;
            font-size: 13px;
            font-family: axis;
        }
        >div:nth-child(3){
            width: 30%;
            padding-left: 16px;
            border-right: none;
            font-size: 13px;
            font-family: axis;
        }
    }
  </style>
